<template>
  <div class="info">
    <!--表单区    -->
    <div class="form">
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" layout="vertical">
        <a-row>
          <a-col :span="12">
            <a-form-item label="所属应用" v-bind="validateInfos.scope">
              <!--:app-type-text="modelRef.scope"  由于后端的scopeName不能获得,所以回显时用scope-->
              <cascader
                v-if="isReset"
                :is-detail="isDetl"
                :app-type-list="searchFun.appTypeListTra"
                :width="'400px'"
                :app-type-text="modelRef.scopeName"
                placeholder="请选择所属应用"
                @change="appTypeValeChange"
              ></cascader>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="上级角色">
              <a-input
                :disabled="isDetl || upperRol.key === -2"
                :value="modelRef.parentName"
                @click="treeFunc.inpCli"
              />
              <div v-if="treeFunc.isShowTree" class="my-edit-tree">
                <div style="height: 30px; margin: 10px; text-align: end; border-bottom: 1px solid #d9d9d9">
                  <CloseOutlined @click="treeFunc.closeTree" />
                </div>
                <div class="my-edit-tree-sub">
                  <tree :is-t-g="false" :disablekey="modelRef.key" @tree-node-selected="treeFunc.treeNodeSelected" />
                </div>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="名称" v-bind="validateInfos.name">
              <a-input v-model:value="modelRef.name" :disabled="isDetl" placeholder="请输入角色名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="标识" v-bind="validateInfos.key">
              <a-input v-model:value="modelRef.key" :disabled="true" placeholder="请输入角色英文标识" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="优先级">
              <a-input-number v-model:value="modelRef.weight" :disabled="isDetl" :min="1" :precision="0" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!--            <a-form-item label="是否可修改">-->
            <!--              <a-switch v-model:checked="modelRef.updateFlag" :disabled="true" />-->
            <!--            </a-form-item>-->
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-item label="备注" v-bind="validateInfos.describe">
              <a-textarea
                v-model:value="modelRef.describe"
                placeholder="备注"
                :disabled="isDetl"
                :auto-size="{ minRows: 2, maxRows: 2 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--页脚按钮    -->
    <div class="=foot">
      <a-space v-if="modelRef.updateFlag && isDetl" :size="8">
        <a-button @click="enterEdit">进入编辑</a-button>
      </a-space>
      <a-space v-if="!isDetl" :size="8">
        <!--        <a-button @click="quiteEdit">退出编辑</a-button>-->
        <a-button type="primary" @click="onSubmit">保存</a-button>
        <a-button @click="onReset">重置</a-button>
      </a-space>
    </div>
  </div>
</template>

<script>
import { defineComponent, toRaw, ref, watch, defineEmits, toRefs, inject, reactive, nextTick } from 'vue'
import { CloseOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { Form } from 'ant-design-vue'
import cascader from './cascader'
const useForm = Form.useForm
import factory from '../factory'
import exp from '@/utils/regular'
import tree from './tree'

export default defineComponent({
  components: { cascader, CloseOutlined, tree },
  emits: ['updateSuccess'],
  setup(props, ctx) {
    const { currentItemId, upperRol, searchFun } = inject('roleParams')
    const modelRef = reactive({
      key: '',
      name: '',
      scope: '',
      scopeName: '',
      createTime: '',
      creator: '',
      creatorName: '',
      describe: '',
      modifier: '',
      modifierName: '',
      modifyTime: '',
      oppositionNames: '',
      oppositions: '',
      parent: '',
      preconditionNames: '',
      preconditions: '',
      source: '',
      weight: '',
      updateFlag: false,
      userBindFlag: false,
    })
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: '请输入名称',
        },
        {
          pattern: exp.name.pattern,
          message: exp.name.message,
        },
        {
          max: 25,
          message: '最多输入25个字符',
        },
      ],
      key: [
        {
          required: true,
          message: '请输入英文标识',
        },
        {
          pattern: exp.key.pattern,
          message: exp.key.message,
        },
        {
          max: 20,
          message: '最多输入20个字符',
        },
      ],
      scope: [
        {
          required: true,
          message: '请选择所属应用',
        },
      ],
      describe: [
        {
          max: 127,
          message: '最多输入127个字符',
        },
      ],
    })
    const { validate, validateInfos } = useForm(modelRef, rulesRef, {
      //表单验证的输出: 字段 值 提示
      onValidate: (...args) => {
        console.log('表单验证的输出: 字段 值 提示', ...args)
      },
    })

    //==保存==============================
    const onSubmit = () => {
      validate()
        .then(() => {
          //表单验证无误后执行
          save()
        })
        .catch((err) => {
          console.log('error', err)
        })
    }
    const save = () => {
      factory.update(modelRef).then((res) => {
        message.success('保存成功')
        ctx.emit('updateSuccess', modelRef)
        quiteEdit()
      })
    }

    //==显示 =================================
    const title = ref('详情')
    const isDetl = ref(true)
    for (let key in currentItemId.value) {
      modelRef[key] = currentItemId.value[key]
    }
    modelRef.parent = upperRol.value.key
    modelRef.parentName = upperRol.value.name
    modelRef.targetKey = upperRol.value.key
    //==重置==================================
    const isReset = ref(true)
    const onReset = () => {
      isReset.value = false
      nextTick(() => {
        isReset.value = true
      })
      for (let key in currentItemId.value) {
        modelRef[key] = currentItemId.value[key]
      }
      modelRef.parent = upperRol.value.key
      modelRef.parentName = upperRol.value.name
      modelRef.targetKey = upperRol.value.key
    }
    //==所属应用选择===========================
    const appTypeValeChange = (obj) => {
      modelRef.scope = obj.value
      modelRef.scopeName = obj.label
    }

    //==进入编辑============================
    const enterEdit = () => {
      isDetl.value = false
    }
    const quiteEdit = () => {
      isDetl.value = true
    }

    //==树======================================
    const treeFunc = reactive({
      isShowTree: false,
      inpCli: () => {
        treeFunc.isShowTree = true
      },
      closeTree: () => {
        treeFunc.isShowTree = false
      },
      treeNodeSelected: (node) => {
        modelRef.parent = node.key
        modelRef.parentName = node.name
        modelRef.targetKey = node.key
        treeFunc.isShowTree = false
      },
    })

    return {
      onSubmit,
      title,
      validateInfos,
      modelRef,
      isDetl,
      appTypeValeChange,
      currentItemId,
      searchFun,
      onReset,
      isReset,
      enterEdit,
      quiteEdit,
      treeFunc,
      upperRol,
    }
  },
})
</script>
<style scoped lang="less">
.info {
  min-height: 620px;
}

.my-edit-tree {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 550px;
  background-color: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;

  .my-edit-tree-sub {
    width: 100%;
    height: 550px;
  }
}
</style>
